<template>
  <div class="user-center-page">
    <div class="container-custom py-8">
      <h1 class="text-3xl font-bold mb-8">个人中心</h1>
      
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 用户信息卡片 -->
        <div class="lg:col-span-1">
          <div class="card p-6 text-center">
            <!-- 头像 -->
            <div class="mb-4">
              <div class="w-24 h-24 mx-auto rounded-full bg-primary-100 flex items-center justify-center">
                <div class="i-mdi-account text-6xl text-primary-600" />
              </div>
            </div>
            
            <!-- 用户信息 -->
            <h2 class="text-xl font-bold mb-1">用户名</h2>
            <p class="text-sm text-gray-500 mb-4">user@example.com</p>
            
            <!-- 会员标识 -->
            <Tag type="primary" size="md" class="mb-4">
              <div class="i-mdi-crown inline-block mr-1" />
              普通会员
            </Tag>
            
            <!-- 快捷操作 -->
            <div class="space-y-2">
              <NuxtLink to="/user/settings" class="btn-primary w-full">
                <div class="i-mdi-cog inline-block mr-2" />
                账户设置
              </NuxtLink>
              <button class="btn-outline w-full" @click="handleLogout">
                <div class="i-mdi-logout inline-block mr-2" />
                退出登录
              </button>
            </div>
          </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="lg:col-span-2">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="card p-6 text-center">
              <div class="i-mdi-shopping text-3xl text-primary-600 mb-2" />
              <div class="text-2xl font-bold mb-1">3</div>
              <div class="text-sm text-gray-600">我的订单</div>
            </div>
            
            <div class="card p-6 text-center">
              <div class="i-mdi-download text-3xl text-green-600 mb-2" />
              <div class="text-2xl font-bold mb-1">2</div>
              <div class="text-sm text-gray-600">已下载</div>
            </div>
            
            <div class="card p-6 text-center">
              <div class="i-mdi-heart text-3xl text-red-600 mb-2" />
              <div class="text-2xl font-bold mb-1">5</div>
              <div class="text-sm text-gray-600">我的收藏</div>
            </div>
            
            <div class="card p-6 text-center">
              <div class="i-mdi-wallet text-3xl text-yellow-600 mb-2" />
              <div class="text-2xl font-bold mb-1">¥0</div>
              <div class="text-sm text-gray-600">账户余额</div>
            </div>
          </div>
          
          <!-- 快捷入口 -->
          <div class="card p-6">
            <h3 class="text-lg font-bold mb-4">快捷入口</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
              <NuxtLink
                to="/user/orders"
                class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-600 hover:bg-primary-50 transition-all text-center group"
              >
                <div class="i-mdi-clipboard-text text-3xl text-gray-400 group-hover:text-primary-600 mb-2 transition-colors" />
                <div class="text-sm font-medium">我的订单</div>
              </NuxtLink>
              
              <NuxtLink
                to="/user/downloads"
                class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-600 hover:bg-primary-50 transition-all text-center group"
              >
                <div class="i-mdi-download-circle text-3xl text-gray-400 group-hover:text-primary-600 mb-2 transition-colors" />
                <div class="text-sm font-medium">下载中心</div>
              </NuxtLink>
              
              <NuxtLink
                to="/user/favorites"
                class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-600 hover:bg-primary-50 transition-all text-center group"
              >
                <div class="i-mdi-heart-circle text-3xl text-gray-400 group-hover:text-primary-600 mb-2 transition-colors" />
                <div class="text-sm font-medium">我的收藏</div>
              </NuxtLink>
              
              <NuxtLink
                to="/cart"
                class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-600 hover:bg-primary-50 transition-all text-center group"
              >
                <div class="i-mdi-cart text-3xl text-gray-400 group-hover:text-primary-600 mb-2 transition-colors" />
                <div class="text-sm font-medium">购物车</div>
              </NuxtLink>
              
              <NuxtLink
                to="/user/settings"
                class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-600 hover:bg-primary-50 transition-all text-center group"
              >
                <div class="i-mdi-cog text-3xl text-gray-400 group-hover:text-primary-600 mb-2 transition-colors" />
                <div class="text-sm font-medium">账户设置</div>
              </NuxtLink>
              
              <NuxtLink
                to="/products"
                class="p-4 border-2 border-gray-200 rounded-lg hover:border-primary-600 hover:bg-primary-50 transition-all text-center group"
              >
                <div class="i-mdi-shopping text-3xl text-gray-400 group-hover:text-primary-600 mb-2 transition-colors" />
                <div class="text-sm font-medium">继续购物</div>
              </NuxtLink>
            </div>
          </div>
          
          <!-- 最近订单 -->
          <div class="card p-6 mt-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-bold">最近订单</h3>
              <NuxtLink to="/user/orders" class="text-sm text-primary-600 hover:text-primary-700">
                查看全部 →
              </NuxtLink>
            </div>
            
            <div class="text-center py-8 text-gray-500">
              <div class="i-mdi-clipboard-text-off text-6xl mb-2 opacity-30" />
              <p class="text-sm">暂无订单</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})

function handleLogout() {
  // TODO: 实现退出登录逻辑
  console.log('退出登录')
}

// SEO
useSeoMeta({
  title: '个人中心 - 代码小库',
  robots: 'noindex',
})
</script>


